<template>
  <div class="newinfo-container">
      <!-- 主标题 -->
    <h3 class="title">{{newsInfo.name}}</h3>
    <!-- 子标题 -->
    <p class="subtitle">
      <span>{{newsInfo.passtime}}</span>
      <span>点击:{{newsInfo.love}}次</span>
    </p>
    <hr />
    <!-- 内容区域 -->
    <div class="content">{{newsInfo.text}}</div>
     <!-- 这是子组件评论区域  子组件需要用id，所以这是父子传值，子组件用props接收-->
    <!-- <comment-box :id="this.id"></comment-box> -->
     <comment-box></comment-box>
  </div>
</template>
<script>
// 导入评论子组件
import comment from '../subcomponents/comment.vue'



import { Toast } from "mint-ui";
export default {
  data() {
    return {
      // 将url中地址中传递过来的id值，挂在到data上，方便以后调用
      //   id: this.$route.params.id,
      newsInfo: []
    };
  },
  created(){
      this.getNewsInfo();
  },
  methods: {
    getNewsInfo() {
      //获取新闻详情
      //   this.$http.get("https://www.apiopen.top/satinApi?type=1&page=1"+this.id).then(result=>{
      this.$http
        .get(
          "https://www.apiopen.top/satinApi?type=1&page=1")
        .then(result => {
          if (result.body.code == 200) {
            Toast("获取详情");
            console.log(result.body.data);
            this.newsInfo = result.body.data[0];
          } else {
            Toast("获取加载失败......");
          }
        });
    }
  },
  components:{//用来注册子组件的节点
    'comment-box':comment
  }
};
</script>
<style scoped>
.newinfo-container {
  padding: 0 4px;
}
.newinfo-container .title {
  font-size: 16px;
  text-align: center;
  margin: 15px 0;
  color: red;
}
.newinfo-container .subtitle {
  font-size: 13px;
  color: #226aff;
  display: flex;
  justify-content: space-between;
}
</style>

